MPP-4160: Modify Popup Banner - 4 Mask Limit

[vpremamozilla]

MPP-4160: Modify Popup Banner - 4 Mask Limit #5545

Screenshot

How to test

• sign up as a new user
• go through flow to generate a new mask x 4
• popup in the corner should appear to have new text according to mockups
  

Checklist (Definition of Done)

• Product Owner accepted the User Story (demo of functionality completed) or waived the privilege.
• Customer Experience team has seen or waived a demo of functionality.
• All acceptance criteria are met.
• Jira ticket has been updated (if needed) to match changes made during the development process.
• I've added or updated relevant docs in the docs/ directory
• Jira ticket has been updated (if needed) with suggestions for QA when this PR is deployed to stage.
• All UI revisions follow the coding standards, and use Protocol / Nebula colors where applicable (see /frontend/src/styles/colors.scss).
• Commits in this PR are minimal and have descriptive commit messages.
• l10n changes have been submitted to the l10n repository, if any.

[groovecoder]

Mentioned in Slack, and per our doc:

Do not re-use IDs for new or updated strings. The translations of existing strings are valid and used in live content. When updating content, add a digit to the string ID to signal it will replace another string. For example, premium-promo-availability-warning-4 replaces premium-promo-availability-warning-3. Remove the old strings when they are no longer referenced in the code.

And, since we're changing the us heading & description to match the non-us values, we could simplify this by introducing new message IDs:

upsell-banner-4-masks-heading = Get maximum email protection
upsell-banner-4-masks-description = Unlock unlimited email masks, reply directly from them, and create new ones instantly with your own { -brand-name-relay } subdomain - anytime, anywhere.

Note: need to check with Product that we can use this new no-phone description for both US and non-US.

Then, we can remove the us/non-us logic from CornerNotification.tsx.

[vpremamozilla]

Mentioned in Slack, and per our doc:

Do not re-use IDs for new or updated strings. The translations of existing strings are valid and used in live content. When updating content, add a digit to the string ID to signal it will replace another string. For example, premium-promo-availability-warning-4 replaces premium-promo-availability-warning-3. Remove the old strings when they are no longer referenced in the code.

And, since we're changing the us heading & description to match the non-us values, we could simplify this by introducing new message IDs:

upsell-banner-4-masks-heading = Get maximum email protection
upsell-banner-4-masks-description = Unlock unlimited email masks, reply directly from them, and create new ones instantly with your own { -brand-name-relay } subdomain - anytime, anywhere.

Note: need to check with Product that we can use this new no-phone description for both US and non-US.

Then, we can remove the us/non-us logic from CornerNotification.tsx.

i had the same thought about the us/non-us logic around CornerNotification.tsx

[groovecoder]

suggestions (non-blocking): since we want to always show the same non-phone heading, description, and image in this upsell banner, we can remove all the isPhonesAvailable, region, and suffix logic.

[groovecoder]

Spot-check and code looks good. Just need to remove the isPhonesAvailable variable declaration to fix the frontend build error.